<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'新增客户分析',liner:true}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="pop_show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="strongtext">
				<text class="titletext textliner">数据分析</text>
			</view>
			<view class="ffffff mainpadding margin_top">
				<!-- <view class="flexbetween">
					<view class="flexleft">
						<view :class="datecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(1)">年</view>
						<view :class="datecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(2)">月</view>
						<view :class="datecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(3)">日</view>
					</view>
					<view class="flexleft selecttime_box radius" @click="shows = true">
						<view class="selecttime" style="margin-right: 20rpx;"></view>
						<view class="selecttime_text">{{startime==""?"自定义时间":startime+"-"+endtime}}</view>
					</view>
				</view> -->
				<view class="flexleft">
					<view class="flexcenter" style="flex: 1;">
						<view class="flexcolumn ciclebgc">
							<view class="maincolor_text">{{allmsg.today_custom_num}}</view>
							<view class="nostrongtext margin_top">今日新增客户</view>
						</view>
					</view>
					<view class=" flexcolumn" style="flex: 1;">
						<view class="bigtext">上{{RetnWF2()}}新增客户</view>
						<view class="maincolor_text margin_top">{{allmsg.prev_custom_num}}</view>
						<view class="upimage2 margin_top" v-show="allmsg.today_custom_num>=allmsg.prev_custom_num"></view>
						<view class="downimage2 margin_top" v-show="allmsg.today_custom_num<allmsg.prev_custom_num"></view>
						<view class="strongtext margin_top">
							<text>同比{{allmsg.today_custom_num>=allmsg.prev_custom_num?'增长':'减少'}}</text>
							<text class="uptext">{{allmsg.xc_custom_num}}</text>
							<text>人</text>
						</view>
					</view>
				</view>
			</view>
			<view class="strongtext margin_top">
				<text class="titletext textliner">详细数据</text>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexbetween">
					<view class="tablehead">日期</view>
					<view class="tablehead">新增客户</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(1)">
					<view class="strongtext">今日</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.today_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(2)">
					<view class="strongtext">昨日</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.zr_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(3)">
					<view class="strongtext">前天</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.qr_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(4)">
					<view class="strongtext">上周</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.sz_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(5)">
					<view class="strongtext">本周</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.bz_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(6)">
					<view class="strongtext">上月</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.sy_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(7)">
					<view class="strongtext">本月</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.by_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(8)">
					<view class="strongtext">上年</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.sn_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween margin_top" @click="jumpkhda(9)">
					<view class="strongtext">今年</view>
					<view class="flexright">
						<view class="strongtext margin_right">{{allmsg.jn_custom_num}}</view>
						<view class="righticon2"></view>
					</view>
				</view>
			</view>
		</view>
		<!--日期 -->
		<!-- 开始时间 -->
		<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirmstart"
			@cancel="shows=false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="showss" :minDate="mindate" title="结束时间" mode="date" @confirm="confirmend"
			@cancel="showss=false"></u-datetime-picker>
		<u-popup round="20" :show="pop_show" @close="pop_show=false">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="itemscreen flexleft margin_top"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择员工" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				showss: false,
				value1: Number(new Date()),
				mindate: Number(new Date()), //最小时间
				// 自定义时间
				startime: this.jinnian(),
				endtime: this.riqi(0),
				datecurrent: 1,
				allmsg: {},
				pop_show:false,
				pageShow: false,
				staff_id: "", //业务员
				staff_name: "",
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.staff_id = data.id
				this.staff_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			close() {
				this.pop_show = false
			},
			cumput(v1,v2){
				let num1 = Number(v1)
				let num2 = Number(v2)
				if(num1<num2){
					return num1 - num2
				}else if(num1>num2){
					return num2 - num1
				}else{
					return num1
				}
			},
			RetnWF2() { //JS判断的if elseif方法
				let wstr = "";
				let date = new Date();
				let day = date.getDay();
				if (day == 0) {
					wstr = "周日";
				} else if (day == 1) {
					wstr = "周一";
				} else if (day == 2) {
					wstr = "周二";
				} else if (day == 3) {
					wstr = "周三";
				} else if (day == 4) {
					wstr = "周四";
				} else if (day == 5) {
					wstr = "周五";
				} else if (day == 6) {
					wstr = "周六";
				}
				return wstr;
			},
			jumpkhda(value) {
				let msg = {
					startime:"",
					endtime:"",
				}
				if (value == 1) {
					msg.startime = this.riqi(0)
					msg.endtime = this.riqi(0)
					// console.log(msg.startime, msg.endtime, "今日")
				} else if (value == 2) {
					msg.startime = this.riqi(-1)
					msg.endtime = this.riqi(-1)
					// console.log(msg.startime, msg.endtime, "昨日")
				} else if (value == 3) {
					msg.startime = this.riqi(-2)
					msg.endtime = this.riqi(-2)
					// console.log(msg.startime, msg.endtime, "前日")
				} else if (value == 4) {
					msg.startime = this.getMondayAndSunday(3)
					msg.endtime = this.getMondayAndSunday(4)
					// console.log(msg.startime, msg.endtime, "上周")
				} else if (value == 5) {
					msg.startime = this.getMondayAndSunday(1)
					msg.endtime = this.getMondayAndSunday(2)
					// console.log(msg.startime, msg.endtime, "本周")
				} else if (value == 6) {
					msg.startime = this.shangyue()
					msg.endtime = this.getLastMonthLast()
					// console.log(msg.startime, msg.endtime, "上月")
				} else if (value == 7) {
					msg.startime = this.benyue(1)
					msg.endtime = this.riqi(0)
					// console.log(msg.startime, msg.endtime, "本月")
				} else if (value == 8) {
					msg.startime = new Date().getFullYear()-1 + "-01-01"
					msg.endtime = new Date().getFullYear()-1 + "-12-31"
					// console.log(msg.startime, msg.endtime, "去年")
				} else if (value == 9) {
					msg.startime = new Date().getFullYear() + "-01-01"
					msg.endtime = this.riqi(0)
					// console.log(msg.startime, msg.endtime, "今年")
				}
				uni.navigateTo({
					url:'/pages/workbench/jiben/kehuda?msg=' + encodeURIComponent(JSON.stringify(msg))
				})
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月“1”
			benyue(value) {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + value; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			shangyue(){
				const today = new Date();
				const thisYear = today.getFullYear();
				const thisMonth = today.getMonth();
				const lastMonth = thisMonth - 1;
				const lastYear = lastMonth === -1 ? thisYear - 1 : thisYear;
				const firstDayOfLastMonth = new Date(lastYear, lastMonth, 1); // 获取上个月的第一天
				return httpRequest.returnDate(Number(firstDayOfLastMonth))
			},
			//获取上个月最后一天
			getLastMonthLast() {
				let date = new Date();
				date.setDate(
					0); //setDate(day) 方法用于设置一个月的某一天。day取1-31表示对应的天数，另外0 为上一个月的最后一天，-1 为上一个月最后一天之前的一天，32 为下个月的第一天或者第二天
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month > 9 ? month : '0' + month;
				let day = date.getDate(); //getDate() 方法可返回月份的某一天。也就是当前date的当前天数
				day = day > 9 ? day : '0' + day;
				return [year, month, day].join("-")
			},
			// 获取本周一1，本周日2，上周一3，上周日4，
			getMondayAndSunday(value) {
				let today = new Date();
				//构建当前日期,格式：2022-08-22 00:00:00
				let year = today.getFullYear(); //本年 
				let month = today.getMonth() + 1; //本月
				let day = today.getDate(); //本日
				let newDate = new Date(year + "-" + month + "-" + day + " 00:00:00"); //年月日拼接
				let nowTime = newDate.getTime(); //当前的时间戳
				let weekDay = newDate.getDay(); //当前星期 0.1.2.3.4.5.6 【0 = 周日】
				let oneDayTime = 24 * 60 * 60 * 1000; //一天的总ms
				// 当前星期减去天数，如今天为周五，则本周一为周五的时间戳减去4天的时间戳。但周日特殊，周一至周六是周几的到的weekDay就是几，但是周日的到的为0，需特殊处理
				let thisWeekMondayTime = (1 - weekDay) * oneDayTime + nowTime; //本周一的时间戳
				if (weekDay == 0) {
					// weekDay = 0 为周日，此时本周一时间为周日减去6天的时间
					thisWeekMondayTime = nowTime - 6 * oneDayTime
				}
				let thisWeekSundayTime = thisWeekMondayTime + 6 * 24 * 60 * 60 * 1000 // 本周日
				let lastWeekMondayTime = thisWeekMondayTime - 7 * oneDayTime // 上周一
				let lastWeekSundayTime = thisWeekMondayTime - oneDayTime // 上周日
				let res = {
					thisWeekMonday: this.date(thisWeekMondayTime),//本周一
					thisWeekSunday: this.date(thisWeekSundayTime),//本周日
					lastWeekMonday: this.date(lastWeekMondayTime),//上周一
					lastWeekSunday: this.date(lastWeekSundayTime),//上周日
				}
				if(value==1){
					return res.thisWeekMonday
				}else if(value==2){
					return res.thisWeekSunday
				}else if(value==3){
					return res.lastWeekMonday
				}else if(value==4){
					return res.lastWeekSunday
				}
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			init() {
				httpRequest.request('/dhtapi/custom/newCustomFx', 'POST', {
					staff_id: this.staff_id
				}).then(res => {
					this.allmsg = res.data
					this.pageShow = true
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			//日期选择
			confirmstart(e) {
				this.shows = false
				this.showss = true
				this.mindate = e.value
				this.startime = this.date(e.value)
				// console.log(this.starttime, "开始时间确定")
			},
			confirmend(e) {
				this.showss = false
				this.endtime = this.date(e.value)
				// console.log(this.endtime,"结束时间")
				this.init()
			},
			//日期选择
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					// 获取今年第一天和今天
					this.startime = this.jinnian()
					this.endtime = this.riqi(0);
				} else if (value == 2) {
					// 获取本月第一天和今天
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
				} else {
					// 获取今日
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
				}
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			},
			// 重置
			resetbtn() {
				this.staff_id = "" //业务员
				this.staff_name = ""
				this.init()
				this.pop_show = false
			},
			sureBtn() {
				this.init()
				this.pop_show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 筛选样式开始
	.surebtn {
		width: 45%;
	}
	
	.reset {
		background: #ebb563;
	}
	.minwidth{
		min-width: 130rpx;
	}
	.rightscreen{
		width: 100%;
	}
	.itemscreen{
		padding-bottom: 20rpx;
	}
	// 筛选样式结束
	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #0BBDCB;
		background-color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #fff;
	}
	
	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	// 新增客户分析
	.ciclebgc {
		width: 220rpx;
		height: 220rpx;
		background-image: url("@/static/image/system/cicle.png");
		background-size: 100% 100%;
		padding: 30rpx;
	}

	.nostrongtext {
		font-size: 24rpx;
	}

	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.uptext {
		color: #00b855;
	}

	.downtext {
		color: #fb6363;
	}

	// 底部表格开始
	.tablehead {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
</style>
